<template>
    <div class="config-table">
        <t class="t2" :id="title || defaultTitle" v-if="title || defaultTitle">
            {{ title || defaultTitle }}
        </t>
        <li v-for="(des, i) in describes" :key="i">
            {{ des }}
        </li>
        <sib-table
            :show-overflow-tooltip="false"
            :show-pagination="false"
            :index-config="indexConfig"
            :table-column="tableColumns[step] || []"
            :table-data="tableData">
            <template #params="{ row }">
                <span v-if="row.details && row.details.length" class="cell-link" @click="handleScroll(row)">
                    {{ row.params }}
                    <el-icon><InfoFilled></InfoFilled></el-icon>
                    <el-tag v-if="row.version" round size="small" type="success">{{ row.version }}</el-tag>
                </span>
                <span v-else>
                    {{ row.params }}
                    <el-tag v-if="row.version" round size="small" type="success">{{ row.version }}</el-tag>
                </span>
            </template>
            <template #name="{ row }">
                <span v-if="row.details && row.details.length" class="cell-link" @click="handleScroll(row)">
                    {{ row.name }}
                    <el-icon><InfoFilled></InfoFilled></el-icon>
                    <el-tag v-if="row.version" round size="small" type="success">{{ row.version }}</el-tag>
                </span>
                <span v-else>
                    {{ row.name }}
                    <el-tag v-if="row.version" round size="small" type="success">{{ row.version }}</el-tag>
                </span>
            </template>
        </sib-table>
        <template v-if="descTables.length">
            <div
                class="config-table"
                v-for="(descTable, index) in descTables"
                :key="index">
                <t class="t2" v-if="descTable.title" :id="descTable.title">
                    {{ descTable.title }}
                </t>
                <li v-for="(des, i) in (descTable.describes || [])" :key="i">
                    {{ des }}
                </li>
                <sib-table
                    :show-overflow-tooltip="false"
                    :show-pagination="false"
                    :index-config="indexConfig"
                    :size="descTable.size"
                    :stripe="descTable.stripe"
                    :table-column="descTable.tableColumn || tableColumns.attributes"
                    :table-data="descTable.configList"
                    style="margin-top: 10px;">
                    <template #params="{ row }">
                        <span v-if="row.details && row.details.length" class="cell-link" @click="handleScroll(row)">
                            {{ row.params }}
                            <el-icon><InfoFilled></InfoFilled></el-icon>
                            <el-tag v-if="row.version" round size="small" type="success">{{ row.version }}</el-tag>
                        </span>
                        <span v-else>
                            {{ row.params }}
                            <el-tag v-if="row.version" round size="small" type="success">{{ row.version }}</el-tag>
                        </span>
                    </template>
                    <template #name="{ row }">
                        <span v-if="row.details && row.details.length" class="cell-link" @click="handleScroll(row)">
                            {{ row.name }}
                            <el-icon><InfoFilled></InfoFilled></el-icon>
                            <el-tag v-if="row.version" round size="small" type="success">{{ row.version }}</el-tag>
                        </span>
                        <span v-else>
                            {{ row.name }}
                            <el-tag v-if="row.version" round size="small" type="success">{{ row.version }}</el-tag>
                        </span>
                    </template>
                </sib-table>
            </div>
        </template>
    </div>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';

export default {
    name: 'ConfigTable',
    props: {
        title: {
            type: String,
            default: '',
        },
        describes: {
            type: Array,
            default: () => ([]),
        },
        step: {
            type: String,
            default: '',
        },
        tableData: {
            type: Array,
            default: () => ([]),
        },
    },
    setup(props) {
        const store = useStore();
        const descTables = computed(() => {
            const data = (props.tableData || []).filter(({ details }) => details).map(({ details }) => details).flat(2);
            // eslint-disable-next-line newline-per-chained-call
            const sonData = data.map(({ configList }) => configList).flat(2).filter(({ details }) => details).map(({ details }) => details).flat(2);
            return data.concat(sonData);
        });
        return {
            indexConfig: { type: 'hidden' },
            defaultTitle: ({
                attributes: '属性',
                events: '事件',
                slots: '插槽',
                refs: '组件内部方法',
            })[props.step],
            tableColumns: {
                attributes: [
                    {
                        label: '属性名',
                        code: 'params',
                        minWidth: 250,
                        width: 250,
                        type: 'slot',
                    },
                    {
                        label: '说明',
                        code: 'des',
                        minWidth: 300,
                    },
                    {
                        label: '类型',
                        code: 'type',
                        width: 200,
                    },
                    {
                        label: '可选值',
                        code: 'values',
                        width: 200,
                    },
                    {
                        label: '默认值',
                        code: 'defaultVal',
                        width: 200,
                    },
                ],
                events: [
                    {
                        label: '事件名',
                        code: 'name',
                        minWidth: 250,
                        width: 250,
                        type: 'slot',
                    },
                    {
                        label: '说明',
                        code: 'des',
                        // minWidth: 450,
                    },
                    {
                        label: '回调参数',
                        code: 'params',
                        // minWidth: 150,
                    },
                ],
                slots: [
                    {
                        label: '插槽名',
                        code: 'name',
                        minWidth: 250,
                        width: 250,
                        type: 'slot',
                    },
                    {
                        label: '说明',
                        code: 'des',
                        // minWidth: 450,
                    },
                    {
                        label: '参数',
                        code: 'params',
                        // minWidth: 150,
                    },
                ],
                refs: [
                    {
                        label: '方法名',
                        code: 'name',
                        minWidth: 250,
                        width: 250,
                        type: 'slot',
                    },
                    {
                        label: '说明',
                        code: 'des',
                        // minWidth: 300,
                    },
                    {
                        label: '参数',
                        code: 'params',
                        // minWidth: 150,
                    },
                    {
                        label: '返回值',
                        code: 'return',
                        // minWidth: 150,
                    },
                ],
            },
            descTables,
            handleScroll({ details }) {
                const dom = document.getElementById(details[0].title);
                const index = store.state.articleTree.findIndex((d) => d.id === details[0].title);
                store.commit('updateCurrentLinkIndex', index);
                if (dom) dom.scrollIntoView({ behavior: 'smooth', inline: 'nearest' });
            },
        };
    },
};
</script>

<style lang="scss">
.config-table {
    margin-top: 100px;
    .cell-link {
        // color: var(--el-primary-color);
        cursor: pointer;
        .el-icon {
            color: var(--el-text-color-secondary);
        }
    }
    .el-tag {
        margin-left: 5px;
    }
}
</style>
